<template>
    <div class="transaction-details_mod" :class="themeClass">
      <v-nav :title="$t('jiedai.借贷记录')"></v-nav>
  
      <div class="transaction-details_mod_box">
        <div class="recharge-details_mod_box_list">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('info.info3')" :loosing-text="$t('info.info4')" :loading-text="$t('info.info2')" :success-text="$t('info.info5')">
            <ul>
              <van-list v-model="loading" :finished="finished" :loading-text="$t('info.info2')" :finished-text="$t('info.info6')" @load="onLoad">
                <li v-for="(item, index) in transactionDetailsList" :key="index" style="border-bottom: 1px solid #eee;margin-bottom: 10px;padding: 10px 0;">
                  <div class="van-cell__values">
                    <div class="van-cell__label"> {{$t('jiedai.借款金额')}}：{{ item.number }}</div>
                    <div class="van-cell__label">{{ $t('jiedai.借款期限') }} ： {{ item.days }} {{ $t('jiedai.天')}}</div>
                  </div>
                  <div class="van-cell__values">
                    <div class="van-cell__label">{{ $t('jiedai.审核状态') }} ：   {{ item.status == 0 ? $t('jiedai.审核中') : item.status == 1 ?$t('jiedai.同意'): $t('jiedai.拒绝') }}</div>
                    <div class="van-cell__label">{{ $t('jiedai.还款状态') }} ： {{ item.is_redeemed==2?$t('jiedai.已还'):$t('jiedai.待还')}}</div>
                  </div>
                  <div class="van-cell__values">
                    <div class="van-cell__label">{{ $t('jiedai.开始时间') }} ：{{ item.start_time }}</div>
                    <div class="van-cell__label" v-if="item.status==1">{{ $t('jiedai.还款时间') }} ： {{ item.remark }}</div>
                  </div>
                  <div class="van-cell__values">
                    <div class="van-cell__label">{{ $t('jiedai.担保人uid') }} ：{{ item.guarantor_id }}</div>
                    <div class="van-cell__label" v-if="item.status==2">{{ $t('jiedai.拒绝理由') }} ： {{ item.remark }}</div>
                  </div>
                  <div class="van-cell__values">
                    <div class="van-cell__label" v-if="item.status==1">{{ $t('jiedai.还款金额') }} ：{{ item.hk_number }}</div>
                    <!-- <div class="van-cell__label" v-if="item.status==2">{{ $t('jiedai.拒绝理由') }} ： {{ item.remark }}</div> -->
                  </div>
                </li>
              </van-list>
            </ul>
          </van-pull-refresh>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'jiedai_record',
    data() {
      return {
        page: 1,
        loading: false,
        finished: false,
        refreshing: false,
        transactionDetailsList: [],
        isDayTime: false
      }
    },
    computed: {
      themeClass() {
        return this.isDayTime ? '' : 'darknight'
      },
      bgColor() {
        return this.isDayTime ? 'black' : 'white'
      },
      themeClass1() {
        return this.isDayTime ? '' : 'dark_li_color'
      }
    },
    watch: {
      '$store.state.nightMode': {
        handler(newVal) {
          this.isDayTime = newVal
        },
        immediate: true
      }
    },
    methods: {
      async getTransferList() {
        await this.$https.get('/user/jiedai_record?page=' + this.page).then(res => {
          if (this.refreshing) {
            this.transactionDetailsList = []
            this.refreshing = false
          }
          this.transactionDetailsList = [...this.transactionDetailsList, ...res.data.data]
          console.log(this.transactionDetailsList,'this.transactionDetailsList')
          this.loading = false
  
          if (this.page >= res.data.last_page) {
            this.finished = true
          } else {
            this.page++
          }
        })
      },
      // 上拉加载处理函数
      onLoad() {
        this.getTransferList()
      },
      // 下拉刷新处理函数
      onRefresh() {
        this.refreshing = true
        this.finished = false
        this.page = 1
        this.loading = true
        this.onLoad()
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  @import url('./index.less');
  .van-cell__values{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
  </style>
  